<template>
	<!-- 个人资料 -->
	<view class="form-container">
		<view class="form-item">
			<text class="label">*昵称</text>
			<input class="input" type="text" placeholder="请输入昵称" v-model="username" />
		</view>
		<view class="form-item">
			<text class="label">*手机</text>
			<input class="input" type="number" maxlength="11" placeholder="请输入手机号码" v-model="phone" />
		</view>
		<button class="submit-button" @click="submitForm">修改资料</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		UserById,
		updateUserById,
		usergetid
	} from '@/request/api.js';
	import {
		goswitchTab
	} from '@/request/wx.js';

	// 假设您有一个响应式变量用于存储token
	const token = ref('');
	const username = ref('嘿嘿嘿');
	const phone = ref('12435768947');

	onLoad((options) => { // 页面加载时获取用户数据
		// 这里的 options 参数包含了页面加载时传递的参数
		console.log('页面加载时获取用户数据', options);
	});

	// 页面显示时执行的逻辑
	onShow(() => {
		console.log('页面显示时加载');
		getToken();
		getUserById();
	});

	const getUserById = async () => { //获取用户信息
		const user = await UserById({
			uid: token.value
		});
		const res = user.data.data;
		// console.log(user);
		if (res.nickname != null) {
			username.value = res.nickname;
			phone.value = res.phomenumber;
		}
	};


	const getToken = () => { // 获取本地存储的token
		const storedToken = uni.getStorageSync('token');
		token.value = storedToken; // 更新响应式变量
	};

	const submitForm = () => {
		// 提交表单的逻辑
		console.log('昵称:', username.value);
		console.log('手机:', phone.value);
		updateUserById({
			uid: token.value,
			nickname: username.value,
			phomenumber: phone.value
		}).then((res) => {
			console.log(res);
			if (res.data.code === 200) {
				goswitchTab(`/pages/user/grzx/grzx`);
			}
		});
	};
</script>

<style>
	.form-container {
		padding: 20px;
	}

	.form-item {
		margin-bottom: 15px;
	}

	.label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.input {
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.submit-button {
		width: 100%;
		padding: 10px;
		background-color: #7B61FF;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
	}
</style>